<template>
<!--  "blog": {-->
<!--  "bigImgId": "1",-->
<!--  "title": "休闲鞋",-->
<!--  "tag": "1",-->
<!--  "id": 1,-->
<!--  "content": "休闲鞋",-->
<!--  "createTime": null,-->
<!--  "updateTime": "1",-->
<!--  "userId": 1-->
<!--  }-->

    <div @click="handelDetailClick" class="blogDetail">
        <div class="title">
            <h1>{{blog.title}}</h1>
            <ul class="infoBar">
                <li><span class="fa fa-user-o"></span> <a href="">{{ UserName }}</a></li>
                <li><span class="fa fa-calendar"></span>{{ blog.createTime }}</li>
                <li><span class="fa fa-commenting-o"></span> <a href="">{{commentNum}}条评论</a></li>
                <li><span class="fa fa-pencil"></span>{{ contentLeng }}字</li>
            </ul>
        </div>
        <div class="detailBox">
            <div class="headerImg">
                <el-image fit="cover" :src="blog.bigImgSrc"></el-image>
            </div>
            <div class="mdBox">
                <v-md-preview :text="blog.content"></v-md-preview>
            </div>
            <div class="comment">
<!--              "commentList": [-->
<!--              {-->
<!--              "id": 2,-->
<!--              "comment": "你好你好1",-->
<!--              "userId": 1,-->
<!--              "time": "2021-09-08 15:43:49",-->
<!--              "blogId": 1-->
<!--              }-->
                <ul>
                    <li :key="item.id" style="display: flex;margin-top: 2.5rem" v-for="item in comment">

                        <el-image :src="item.iconSrc" class="userIcon" fit="cover"></el-image>
                        <div style="display: flex;flex-direction: column ">
                            <h4>{{item.userName}}</h4>
                            <span style="font-size: 0.75rem">{{item.time}}</span>
                            <h4>{{item.comment}}</h4>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="leaveMsg">
                <h4> 留言板</h4>
                <div style="display: flex;justify-content: center;">
                    <textarea v-model="leaveMsg">

                </textarea>
                </div>
                <button class="leaveMsgBtn"><span>发送✈️</span>️</button>


            </div>
        </div>


    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "BlogDetail",
        data() {
            return {
              blog: {},
              comment:[],
              leaveMsg:''
            }
        },
      created(){
          //初始化页面
        // console.log('blogId'+to.query.blogId)
        this.getBlog(this.$route.query.blogId)
        // this.getCommentnum()

      },
      beforeRouteUpdate(to, from, next) {
          // console.log(to.query.blogId)
          this.getBlog(to.query.blogId)
        next()
      },
      methods: {
            handelDetailClick() {
                this.$EventBus.$emit('AsideOpen', 'DetailClick')
                console.log('Detail点击')

            },
        getBlog(id){
              let postData={
                "id":id
              }
          this.axios.defaults.withCredentials = true;
          this.axios.defaults.headers.post["Content-Type"] =
              "application/json;charset=utf-8";
              this.axios.post('http://shilezhi.club:8082/Api/Blog/GetBlogById',JSON.stringify(postData)).then(
                  respoense=>{
                    this.blog = respoense.data.blog
                    this.getCommentnum()
                  },
                  error => {
                    console.log(error)
                  }
              )
        },
        getCommentnum(){
          let postData={
            'blogId': this.blog.id
          }
          // console.log(this.blog)
          this.axios.post('http://shilezhi.club:8082/Api/Comment/GetByBlogId',JSON.stringify(postData)).then(
              response=>{
                this.comment = response.data.commentList
                // console.log(response.data)
              },
              err=>{

              }
          )
        },
        },
      computed:{
        UserName(){
          return  this.$store.state.AdminName.get(this.blog.userId+'');
        },
        commentNum(){
          return 0
        },
        contentLeng(){
          return 0
        }


      }
    }
</script>

<style scoped>




    .blogDetail {
        display: flex;
        box-sizing: border-box;
        background-color: inherit;
        /*width: 100%;*/
        max-width: 46.25rem;
        flex-direction: column;
        /*padding:1.25rem;*/
        background-color: #f1f3f4;

    }





    @media screen and (max-width: 1200px)  and (min-width: 999px){
      .blogDetail{
        max-width: 50rem ;
      }

    }
    @media screen and (max-width: 1000px) and (min-width: 765px){
      .blogDetail{
        max-width: 33.625rem ;
      }
    }

    @media screen and (max-width: 700px) {
      .title {
        padding: 0.9375rem !important;
      }
      .blogDetail{
        max-width: 100vw ;
      }


    }

    .title {
        box-sizing: border-box;
        padding: 1.25rem;
        background-color: #f9f9f9;
    }

    .title h1 {
        font-size: 2.25rem;
        color: black;
        line-height: 1.42857143;
        font-weight: 300;
    }

    .title span {
        font-size: 0.8125rem;
    }

    .infoBar {
        border-top: 0.0625rem rgba(237, 241, 242, .6) solid;
        padding-top: 0.625rem;
    }

    .infoBar li {
        display: inline-block;
        font-size: 0.8125rem;
        padding-right: 0.625rem;
    }

    .infoBar span {
        padding-right: 0.3125rem;
    }

    .el-image {
        position: inherit;
        /*width: 100%;*/
        height: 15.625rem;
        border-radius: 0.3125rem 0.3125rem 0 0;
        z-index: 0;
        display: block;

    }

    .detailBox {
        border-radius: 0.25rem;
        padding: 1.25rem;
    }

    .mdBox {
        /*padding: 1.875rem !important;*/
        border-radius: 0 0 0.25rem 0.25rem;
        overflow: hidden;
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%);

        background-color: #fff;
    }

    .comment {
        margin-top: 1.875rem;
    }

    .userIcon {
        width: 2.5rem;
        position: inherit;
        height: 2.5rem;
        border-radius: 0.3125rem;
        z-index: 0;
        display: inline-block;
        margin-right: 1.875rem;
        flex-shrink: 0;
    }

    .leaveMsg textarea {
        /*box-sizing: border-box;*/
        width: 80%;
        margin-top: 2rem;
        height: 7.5rem;
        /*margin: 3.125rem;*/
        resize: none;
        border: 1px solid white;
        border-radius: 0.1875rem;
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%);


    }

    .leaveMsg {
        margin-top: 2rem;
    }

    .leaveMsg textarea:focus {
        outline: none !important;
        box-shadow: 0 0 0 .2rem rgba(68, 139, 255, .25);
        /*border-*/
    }

    .leaveMsgBtn {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        margin-top: 1.875rem;
        padding: 0.3125rem 0.625rem;
        color: inherit;
        border-radius: 10%;
        background-color: lightpink;
        text-align: center;
        float: right;
    }

    .leaveMsgBtn span {

    }

    .leaveMsgBtn:focus {
        box-shadow: 0 0 0 .2rem rgba(68, 139, 255, .25);
    }

</style>